// directives/resize.js
export default {
  /**
   * 指令挂载时执行
   * @param {HTMLElement} el - 绑定指令的DOM元素
   * @param {Object} binding - 指令绑定信息
   */
  mounted(el, binding) {
    // 获取配置参数（默认值处理）
    const options = {
      offsetSelectors: '.query-form', // 默认需要排除的元素
      watchElements: '.query-form', // 默认需要监听尺寸变化的元素（如侧边栏）
      extraMargin: 130, // 默认额外边距
      minHeight: 200, // 最小高度
      ...binding.value // 合并用户传入的配置
    }
    // 计算并设置元素高度的核心函数
    const setElementHeight = () => {
      // 获取视口总高度
      const viewportHeight = window.innerHeight

      // 计算需要排除的元素总高度
      let offsetTotal = 0
      if (options.offsetSelectors) {
        const offsetElements = document.querySelectorAll(options.offsetSelectors)
        offsetElements.forEach(element => {
          // 只计算显示状态的元素
          if (element.offsetParent !== null) {
            offsetTotal += element.offsetHeight
          }
        })
      }

      // 计算最终高度（视口高度 - 偏移元素高度 - 额外边距）
      const targetHeight = viewportHeight - offsetTotal - options.extraMargin
      const finalHeight = Math.max(targetHeight, options.minHeight)

      // 应用样式
      el.style.height = `${finalHeight}px`
      el.style.overflow = 'auto' // 内容超出时显示滚动条
      el.style.boxSizing = 'border-box' // 避免padding影响总高度
    }

    // 初始计算高度
    setElementHeight()

    // 窗口大小变化时重新计算
    const handleResize = () => {
      requestAnimationFrame(setElementHeight)
    }

    // 监听窗口resize事件
    window.addEventListener('resize', handleResize)

    // 监听关键元素（如侧边栏）的尺寸变化
    let resizeObserver = null
    if (binding.value?.watchElements || options.watchElements) {
      const watchSelectors = binding.value?.watchElements || options.watchElements
      const watchElements = document.querySelectorAll(watchSelectors)

      if (watchElements.length) {
        // 创建ResizeObserver实例，监听元素尺寸变化
        resizeObserver = new ResizeObserver(entries => {
          // 元素尺寸变化时重新计算高度
          requestAnimationFrame(setElementHeight)
        })

        // 监听所有目标元素
        watchElements.forEach(element => {
          resizeObserver.observe(element)
        })
      }
    }

    // 存储方法和实例到元素上，便于卸载时清理
    el._resizeHandler = handleResize
    el._resizeObserver = resizeObserver
    el._recalculateHeight = setElementHeight // 暴露手动计算方法
  },

  /**
   * 指令更新时执行（如绑定值变化）
   */
  updated(el) {
    // 配置变化时重新计算高度
    el._recalculateHeight()
  },

  /**
   * 指令卸载时执行
   */
  unmounted(el) {
    // 移除窗口监听
    if (el._resizeHandler) {
      window.removeEventListener('resize', el._resizeHandler)
    }

    // 停止元素尺寸监听
    if (el._resizeObserver) {
      el._resizeObserver.disconnect()
    }
  }
}
